import { StyleSheet } from 'react-native';
import {
  APP_BLACK,
  APP_RED,
  APP_YELLOW,
  PLACE_HOLDER_GREY
} from '../../../../../../constant/color';
import { phonePx } from '../../../../../../util/adapt';
import statusBarManager from '../../../../../../util/native/statusBarManager';
import {
  getScreenInfo,
  ScreenOrientation
} from '../../../../../../util/screen';

const { height } = getScreenInfo({
  screenOrientation: ScreenOrientation.Portrait
});

export default StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff'
  },
  title: {
    marginTop: phonePx(16) + statusBarManager.getStatusBarHeight(),
    color: APP_BLACK,
    fontSize: phonePx(24),
    marginLeft: phonePx(16),
    fontWeight: '500'
  },
  type: {
    marginTop: phonePx(30),
    color: APP_BLACK,
    fontSize: phonePx(18),
    marginLeft: phonePx(16),
    fontWeight: '500',
    marginBottom: phonePx(16),
    alignSelf: 'flex-start'
  },
  content: {
    alignItems: 'center'
  },
  todayContent: {
    marginLeft: phonePx(16),
    flexDirection: 'row',
    alignItems: 'center',
    height: phonePx(29),
    marginTop: phonePx(10)
  },
  today: {
    fontSize: phonePx(14),
    color: APP_BLACK,
    fontWeight: '500'
  },
  num: {
    color: APP_RED,
    fontWeight: 'bold'
  },
  line: {
    marginLeft: phonePx(12),
    width: phonePx(1),
    height: phonePx(11),
    backgroundColor: '#979797',
    marginTop: phonePx(1)
  },
  done: {
    marginLeft: phonePx(12),
    fontSize: phonePx(12),
    color: PLACE_HOLDER_GREY
  },
  todayCourseContent: {
    width: phonePx(328),
    minHeight: phonePx(72),
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: phonePx(8),
    backgroundColor: '#EFF8FF',
    marginLeft: phonePx(16),
    marginTop: phonePx(20)
  },
  contentLine: {
    backgroundColor: '#6AA0FF',
    marginLeft: phonePx(15),
    width: phonePx(1),
    height: phonePx(41)
  },
  dateContent: {
    width: phonePx(67),
    height: phonePx(42),
    marginLeft: phonePx(16),
    alignItems: 'center',
    marginTop: -phonePx(5)
  },
  time: {
    color: APP_RED,
    fontSize: phonePx(24),
    fontWeight: 'bold',
    width: phonePx(75),
    alignItems: 'center'
  },
  date: {
    marginTop: phonePx(6),
    fontSize: phonePx(12),
    color: APP_BLACK
  },
  typeContent: {
    marginTop: phonePx(6),
    flexDirection: 'row',
    alignItems: 'center'
  },
  typeIcon: {
    width: phonePx(15),
    height: phonePx(12),
    marginLeft: phonePx(7)
  },
  typeDesc: {
    marginLeft: phonePx(4),
    color: '#6D7278',
    fontSize: phonePx(12)
  },
  nameContent: {
    width: phonePx(198),
    minHeight: phonePx(42),
    marginLeft: phonePx(15)
  },
  name: {
    marginTop: phonePx(2),
    fontSize: phonePx(16),
    color: APP_BLACK,
    fontWeight: '500'
  },
  from: {
    marginTop: phonePx(6),
    fontSize: phonePx(12),
    color: '#6AA0FF'
  },
  empty: {
    height: height / 2
  }
});
